{extend name='public/base' /}
{block name='content'}
{include file='public/content_header' /}
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <!-- 表单头部 -->
                <div class="card-header">
                    <div class="btn-group">
                        <a class="btn flat btn-sm btn-default BackButton">
                            <i class="fas fa-arrow-left"></i>
                            返回
                        </a>
                    </div>
                </div>
                <!-- 表单 -->
                <form id="dataForm" class="form-horizontal dataForm" action="" method="post"
                      enctype="multipart/form-data">
                    <!-- 表单字段区域 -->
                    <div class="card-body">
                        <div class="form-group row">
                            <label for="setting_group_id" class="col-sm-2 col-form-label ">所属分组</label>
                            <div class="col-sm-10 col-md-4 formInputDiv">
                                <select name="setting_group_id" id="setting_group_id" class="form-control field-select"
                                        data-placeholder="请选择所属分组">
                                    <option value=""></option>
                                    {foreach name='setting_group_list' id='item'}
                                    <option value="{$item.id}" {if isset($data) &&
                                            $data.setting_group_id==$item.id}selected{/if}>
                                        {$item.name}
                                    </option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <script>
                            $('#setting_group_id').select2();
                        </script>
                        <div class="form-group row">
                            <label for="name" class="col-sm-2 col-form-label ">名称</label>
                            <div class="col-sm-10 col-md-4 formInputDiv">
                                <input id="name" name="name" value="{$data.name|default=''}" placeholder="请输入名称"
                                       type="text" class="form-control field-text">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="description" class="col-sm-2 col-form-label ">描述</label>
                            <div class="col-sm-10 col-md-4 formInputDiv">
                                <input id="description" name="description" value="{$data.description|default=''}"
                                       placeholder="请输入描述" type="text" class="form-control field-text">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="code" class="col-sm-2 col-form-label ">代码</label>
                            <div class="col-sm-10 col-md-4 formInputDiv">
                                <input id="code" name="code" value="{$data.code|default=''}" placeholder="请输入代码"
                                       type="text" class="form-control field-text">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label ">设置配置</label>
                            <div class="col-sm-10 col-md-10">
                                <table id="settingSetting" class="table table-hover table-bordered datatable"
                                       width="100%">
                                    <thead>
                                    <tr class="input-type">
                                        <th>操作</th>
                                        <th>设置类型</th>
                                        <th>设置名称</th>
                                        <th>设置字段</th>
                                        <th>设置内容</th>
                                        <th>设置选项</th>
                                    </tr>
                                    </thead>
                                    <tbody id="dataBody">
                                    {if isset($data)}
                                    {foreach name='data.content' id='item'}
                                    <tr>
                                        <td>
                                            <a class="btn btn-xs btn-primary" onclick="addNew(this,1)">插入</a>
                                            <a class="btn btn-xs btn-success" onclick="addNew(this,2)">追加</a>
                                            <a class="btn btn-xs btn-danger" onclick="delThis(this,1)">删除</a>
                                        </td>

                                        <td>
                                            {include file='setting/config_type' /}
                                        </td>

                                        <td>
                                            <input class="form-control" placeholder="名称" value="{$item.name}"
                                                   name="config_name[]">

                                        </td>
                                        <td>
                                            <input class="form-control" placeholder="字段" value="{$item.field}"
                                                   name="config_field[]">

                                        </td>

                                        <td>
                                            <input class="form-control" name="config_content[]"
                                                   value="{$item.content}" placeholder="选项/默认值(默认值为内容或者第一个选项)"/>
                                        </td>
                                        <td>
                                                    <textarea class="form-control" name="config_option[]"
                                                              placeholder="设置选项(单选，复选，选择列表等需要填写此项。格式为 字段||中文名称+换行符)">{$item.option}</textarea>
                                        </td>
                                    </tr>
                                    {/foreach}
                                    {/if}
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="sort_number" class="col-sm-2 col-form-label ">排序</label>
                            <div class="col-sm-10 col-md-4 formInputDiv">
                                <div class="input-group">
                                    <input id="sort_number" name="sort_number"
                                           value="{$data.sort_number|default='1000'}" placeholder="请输入排序" type="number"
                                           class="form-control field-number">
                                </div>
                            </div>
                        </div>
                        <script>
                            $('#sort_number')
                                .bootstrapNumber({
                                    upClass: 'success',
                                    downClass: 'primary',
                                    center: true
                                });
                        </script>

                    </div>
                    <!-- 表单底部 -->
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-sm-2">
                            </div>

                            <div class="col-sm-10 col-md-4 formInputDiv">

                                <div class="btn-group">
                                    <button type="submit" class="btn btn-sm btn-primary dataFormSubmit">
                                        保 存
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button type="reset" class="btn btn-sm btn-default dataFormReset">
                                        重 置
                                    </button>
                                </div>


                                {if !isset($data)}
                                <div class="btn-group float-right createContinueDiv">
                                    <input type="checkbox" class="form-check-input" value="1" id="_create" name="_create" title="继续添加数据">
                                    <label class="form-check-label" for="_create">继续添加</label>
                                </div>
                                {/if}
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<table>
    <tbody id="data-template" style="display: none">
    <tr>
        <td>
            <a class="btn btn-xs btn-primary" onclick="addNew(this,1)">插入</a>
            <a class="btn btn-xs btn-success" onclick="addNew(this,2)">追加</a>
            <a class="btn btn-xs btn-danger" onclick="delThis(this,1)">删除</a>
        </td>
        <td>
            <select name="config_type[]" class="form-control">
                <option value="text">文本[text]</option>
                <option value="number">数字[number]</option>
                <option value="password">密码[password]</option>
                <option value="mobile">手机号[mobile]</option>
                <option value="email">邮箱[email]</option>
                <option value="id_card">身份证号[id_card]</option>
                <option value="url">网址[url]</option>
                <option value="ip">IP地址[ip]</option>
                <option value="textarea">文本域[textarea]</option>
                <option value="switch">开关[switch]</option>
                <option value="select">选择列表[select]</option>
                <option value="multi_select">多项选择列表[multi-select]</option>
                <option value="image">图片上传[image]</option>
                <option value="multi_image">多图上传[multi-image]</option>
                <option value="file">文件上传[file]</option>
                <option value="multi_file">多文件上传[multi-file]</option>
                <option value="date">日期[date]</option>
                <option value="date_range">日期范围[date-range]</option>
                <option value="datetime">日期时间[datetime]</option>
                <option value="datetime_range">日期时间范围[datetime-range]</option>
                <option value="year">年[year]</option>
                <option value="year_range">年范围[year-range]</option>
                <option value="year_month">年月[year-month]</option>
                <option value="year_month_range">年月范围[year-month-range]</option>
                <option value="map">地图选点[map]</option>
                <option value="color">颜色选择[color]</option>
                <option value="icon">图标选择[icon]</option>
                <option value="editor">富文本编辑器[editor]</option>
            </select>
        </td>
        <td>
            <input class="form-control" placeholder="名称" name="config_name[]">

        </td>
        <td>
            <input class="form-control" placeholder="字段" name="config_field[]">

        </td>

        <td>
            <input class="form-control" name="config_content[]" placeholder="选项/默认值(默认值为内容或者第一个选项)"/>
        </td>
        <td>
            <textarea class="form-control" name="config_option[]"
                      placeholder="设置选项(单选，复选，选择列表等需要填写此项。格式为 字段||中文名称+换行符)"></textarea>
        </td>
    </tr>

    </tbody>
</table>

<script>
    /** 表单验证 **/
    $('#dataForm').validate({
        rules: {
            'setting_group_id': {
                required: true,
            },
            'name': {
                required: true,
            },
            'description': {
                required: true,
            },
            'code': {
                required: true,
            },
            'sort_number': {
                required: true,
            },

        },
        messages: {
            'setting_group_id': {
                required: "所属分组不能为空",
            },
            'name': {
                required: "名称不能为空",
            },
            'description': {
                required: "描述不能为空",
            },
            'code': {
                required: "代码不能为空",
            },
            'sort_number': {
                required: "排序不能为空",
            },

        }
    });


    function addNew(obj, type) {
        var template = $('#data-template').html();
        if (obj == null) {
            $("#dataBody").append(template);
        } else {
            if (type === 1) {
                $(obj).parent().parent().before(template);
            } else {
                $(obj).parent().parent().after(template);
            }
        }

        $('#dataBody select').select2();
    }

    function delThis(obj) {
        layer.confirm('您确认删除本行吗？', {title: '删除确认', closeBtn: 1, icon: 3}, function () {
            $(obj).parent().parent().remove();
            layer.closeAll();
        });
    }
</script>

{if !isset($data)}
<script>
    $(function () {
        addNew(null, 1);
    });
</script>
{else/}
<script>
    $('#dataBody select').select2();
</script>
{/if}

{/block}